<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>角色名称</span>
        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          size="mini"
          placeholder="角色名称"
          v-model="params['roleName']"
        ></el-input>
      </el-row>
      <el-row style="padding-top:10px"> 
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
    </div>

    <el-table
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
    >
    <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
      <!-- <el-table-column align="center" type="index" label="ID" width="80"></el-table-column> -->
      <el-table-column prop="id" align="center" label="ID" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="roleName" align="center" label="角色名称" width="320">
        <template slot-scope="scope">
          <span>{{scope.row.roleName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="200" prop="createTime" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | parseTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <span type="primary" size="mini" @click="editRow(scope.row)" style="color:#409eff;padding-right:20px">修改</span>
          <span size="mini" type="danger" @click="handleDelete(scope.row)" style="color:red;">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="文章标题" prop="roleName">
          <el-input v-model="temp.roleName" placeholder="角色名称"  style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="temp.description" placeholder="在这里写描述" type="textarea" :rows="3" style="width:300px;"></el-input>
        </el-form-item>

        <!-- <el-form-item label="权限" prop="permissionId">
          <el-select v-model="temp.permissionId" placeholder="请选择权限">
            <el-option v-for="(list,key) in permissionsList" :key="key" :value="list" :label="list"></el-option>
          </el-select>
        </el-form-item> -->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" size="mini" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      container: false,
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20
      },
      cmsList:[],
      list:[],
      permissionsList:[],
      temp:{},
      rules: {
        roleName: [
          {
            required: true,
            message: "角色名称",
            trigger: "change",
            max: 50
          }
        ],
      }
    };
  },
  created() {
     this.loadData();
     this.$post('/admin/manager/own_permissions/list')
        .then(data => {
          this.permissionsList= data;
          console.log(data)
        })
  },

methods: {
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleFilter () {
      this.loadData()
    },
    handleDelete (row) {
      this.$confirm('确定删除该角色吗?', '提示').then(_ => {
        this.$post('/admin/manager/role/delete', {
          roleId: row.id
        }).then(data => {
          this.loadData()
        })
      })
    },
    addRow() {
      this.dialogFormVisible = true
      this.isEditing = false
      this.temp = {}
    },
    editRow(row) {
      // const option ={
      //   roleId:row.id,
      //   roleName:row.roleName,
      //   description:row.description,
      //   permissionId:2
      // }
      // this.$post("/admin/manager/role/modify", option)
      //   .then(data => {
      //     console.log(data)
      //   })
      //   return;
          
      console.log(row)
      this.dialogFormVisible = true
      this.isEditing = true
      this.temp = Object.assign({}, row)
    },
    loadData(){
      this.$get("/admin/manager/role/list", this.params)
        .then(data => {
          this.list = data.dataList;
          this.total = data.total
        })
        .catch(_ => {
          console.log("Err",_)
        });
    },
    submitFormAction () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.submiting = true
          const tempData = Object.assign({}, this.temp)
          const postData={
            roleId:tempData.id,
            roleName:tempData.roleName,
            description:tempData.description,
            permissionId:23
          }
          console.log("postData::::",postData)
          
          let url = '/admin/cms_article/add '
          if (this.isEditing) {
            url = '/admin/manager/role/modify'
          }
          this.$post(url, postData)
            .then(data => {
              this.loadData()
              this.$$notify('操作成功')
              this.dialogFormVisible = false
            })
            .finally(_ => {
              this.submiting = false
            })
        }
      })
    },
  }
};
</script>
<style>
.el-table td, .el-table th{
  padding: 1px 0;
}
.el-table{
  font-size: 12px;
}
.opencolor{
  color: red;
}
.openSearch {
  /* width: 100px; */
  margin-bottom: 10px;
  padding-bottom: 5px;
  /* border-bottom: 1px solid #ccc; */
}
</style>